<script setup>
import SsoRole from '@core/engine/ThirdPlatform/SsoRole';
import SubViewContainer from '@core/components/subLayout/SubViewContainer.vue';
import TableWithPagination from '@core/components/TableWithPagination.vue';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

const isTableLoading = ref(true);
const userRoles = ref([]);
const refreshRoleList = async () => {
  isTableLoading.value = true;
  try {
    userRoles.value = await SsoRole.fetchList();
  } finally {
    isTableLoading.value = false;
  }
};
refreshRoleList();

const editRoleFormRef = ref();
const emptyRole = { roleId: '', roleName: '' };
const editingRole = reactive({ ...emptyRole });
const editRoleRules = {
  roleName: [{ required: true, message: t('inputRoleNamePlease'), trigger: 'blur' }],
};
const isEditDialogShown = ref(false);
const isEditionSubmitting = ref(false);
const onSubmitRole = async (formRef) => {
  if (!formRef) { return; }
  isEditionSubmitting.value = true;
  await formRef.validate();
  try {
    if (editingRole.roleId) {
      await SsoRole.updateOne(editingRole);
    } else {
      await SsoRole.createOne(editingRole);
    }
  } finally {
    isEditionSubmitting.value = false;
    isEditDialogShown.value = false;
  }
  await refreshRoleList();
};

const onClickAddRole = () => {
  Object.assign(editingRole, emptyRole);
  isEditDialogShown.value = true;
};

const onClickEditRole = (row) => {
  Object.assign(editingRole, row);
  isEditDialogShown.value = true;
};

const onDeleteRole = async (params) => {
  isTableLoading.value = true;
  try {
    await SsoRole.deleteOne(params.roleId);
    await refreshRoleList();
  } finally {
    isTableLoading.value = false;
  }
};
</script>

<template>
  <SubViewContainer>
    <template #header-suffix>
      <ElButton type="primary" @click="onClickAddRole">{{t('createRole')}}</ElButton>
    </template>
    <ElCard>
      <TableWithPagination
        v-loading="isTableLoading"
        :data="userRoles"
        paginationLayout="sizes, total, prev, pager, next"
        :paginationTotal="userRoles.length"
      >
        <ElTableColumn prop="roleId" :label="t('id')" width="176" />
        <ElTableColumn prop="roleName" :label="t('roleName')" />
        <ElTableColumn :label="t('operations')" fixed="right" width="268">
          <template #default="{ row }">
            <ElLink type="primary" @click="onClickEditRole(row)">{{t('edit')}}</ElLink>
            <ElDivider class="divider" direction="vertical" />
            <ElPopconfirm
              :title="t('sureToDelete', { roleName: row.roleName })"
              :width="226 + row.roleName.length * 8"
              @confirm="onDeleteRole(row)"
            >
              <template #reference>
                <ElLink type="danger">{{t('delete')}}</ElLink>
              </template>
            </ElPopconfirm>
          </template>
        </ElTableColumn>
      </TableWithPagination>
    </ElCard>
    <ElDialog
      v-model="isEditDialogShown"
      :title="t(editingRole.roleId ? 'updateRole' : 'createRole')"
      width="35%"
    >
      <ElForm
        ref="editRoleFormRef"
        :rules="editRoleRules"
        :model="editingRole"
        label-position="right"
        label-width="88px"
        class="edit-role-form"
      >
        <ElFormItem v-if="editingRole.roleId" :label="t('id')">
          <ElInput :value="editingRole.roleId" disabled />
        </ElFormItem>
        <ElFormItem :label="t('roleName')" prop="roleName">
          <ElInput v-model="editingRole.roleName" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton @click="isEditDialogShown = false">{{t('cancel')}}</ElButton>
        <ElButton
          :loading="isEditionSubmitting"
          type="primary"
          @click="onSubmitRole(editRoleFormRef)"
        >
          {{t('submit')}}
        </ElButton>
      </template>
    </ElDialog>
  </SubViewContainer>
</template>

<i18n lang="yaml" locale="zh-CN">
  id: 'ID'
  roleName: '角色名称'
  operations: '操作'
  create: '新增角色'
  edit: '编辑'
  delete: '删除'
  inputRoleNamePlease: '请输入角色名称'
  sureToDelete: '你确定要删除角色“{roleName}”吗？'
  updateRole: '编辑角色'
  createRole: '新增角色'
  cancel: '取消'
  submit: '提交'
</i18n>

<style lang="scss" scoped>
.divider {
  margin: 0 12px;
}

.pagination-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  margin-top: 20px;
}

.edit-role-form {
  padding: 12px 12px 0;
}
</style>
